<template>
	<div id="ShopCart">
		<div class="header">
			<i class="tp-icon icon-black-back" @click="common.back()"></i>
			<p class="headerT">购物车</p>
			<i class="tp-icon shop-address"></i>
			<span class="success" @click="editor()">{{btnTxt}}</span>
		</div>
		<div class="cart-list">
			<div class="cart-item" v-for="(item,index) in goods_info">
				<div class="cart-item-title">
					<div class="checkbox" @click="allselect(index,item.active)" :class="{chrActive:item.active==1}" :data-id="item.shop_id">
						
					</div>
					<div class="title" v-if="item.shop">
						<img src="../assets/timg/headimg.jpg" />
						<span class="name">{{item.shop.shop_name}}</span>
						<i class="tp-icon icon-right"></i>
					</div>
					<div class="title" v-else>
						<span class="name">空</span>
					</div>
					<router-link to="#" class="coupon">领券</router-link>
				</div>
				<div class="cart-item-body" v-for="(item2,index2) in item.goods_list">
					<div class="body">
						<div @click="selected(index,index2,item2.active,item2.cart_id)" class="checkbox" v-bind:class="{chrActive:item2.active==1}"  :data-mode="item2.show" :data-id="item2.cart_id">
							<icon type="circle" v-show="!item2.show==item2.cart_id"></icon>
							<icon type="success" v-show="item2.show==item2.cart_id"></icon>
						</div>
						<div class="img">
							<img :src="item2.goods.goods_thumb" />
						</div>
						<div class="info">
							<div class="name">{{item2.goods_name}}</div>
							<div class="spec">{{item2.goods_name}}</div>
							<div class="other">
								<div class="price"><span>￥</span>{{item2.goods_price}}</div>
								<div class="num-box">
									<a href="javascript:;" class="btn minus" @click="minus(index,index2,item2.goods_num)">-</a>
									<input type="number" readonly="readonly" class="value" v-model="item2.goods_num" />
									<a href="javascript:;" class="btn plus" @click="plus(index,index2,item2.goods_num)">+</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer" v-show="delShow">
			<div class="footer-left">
				<div @click="footAll()">
					<icon type="circle" v-show="show"></icon>
					<icon type="success" v-show="!show" style="color: red;"></icon>
				</div>
				<span>全选</span>
				<!--<icon type="success" >全选</icon>-->
				<p class="sum-price">合计:&nbsp;&nbsp;¥{{sum_price}}</p>
			</div>
			
			<div class="pay-btn" @click="invo()">去结算(
				<span v-if="sum_goodnum>=0">{{sum_goodnum}}</span>
				<span v-else>0</span> )
			</div>
		</div>
		<div class="footer del" v-show="!delShow">
			<div class="footer-left">
				<div @click="footAll()">
					<icon type="circle" v-show="show"></icon>
					<icon type="success" v-show="!show" style="color: red;"></icon>
				</div>
				<span>全选</span>
				<!--<icon type="success" >全选</icon>-->
				<!--<p class="sum-price">合计:&nbsp;&nbsp;¥{{sum_price}}</p>-->
			</div>
			<div class="pay-btn collect" >移入收藏</div>
			<div class="pay-btn" @click="del()">删除(
				<span v-if="sum_goodnum>=0">{{sum_goodnum}}</span>
				<span v-else>0</span> )
			</div>
			
		</div>
		<toast v-model="toastShow" type="text">{{msg}}</toast>
	</div>
</template>

<script>
	import Vue from 'vue'
	//	import {arrIndex} from "../assets/js/common"
	import $ from 'jquery';
	//	import axios from 'axios';
	import {
		Icon,
		XHeader,
		Toast
	} from 'vux';

	export default {
		data() {
			return {
				btnTxt:'编辑',
				delShow:true,
				active: 0,
				show: true,
				value: 0,
				sum_price: 0, //总价钱
				sum_goodnum: 0,
				goods_info: '',
				cart_ids: [],
				msg: '',
				toastShow: false,
				shop_id: [],
				
			}
		},
		components: {
			Icon,
			XHeader,
			Toast
		},
		watch: {},

		mounted() {
			this.shopcart();
		},
		activated() {

		},
		deactivated() {

		},
		created() {

		},
		//方法
		methods: {
			//获取购物车信息
			shopcart: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/mall_member/cart_list.json',
					data: ''
				}).then((res) => {
					var that = this;
					if(res.data.code == 1) {
						this.goods_info = res.data.data.goods_cart_list;
						$.each(this.goods_info, function(index, el) {
							Vue.set(this, 'active', 0);
							$.each(el.goods_list, function(index2) {
								Vue.set(this, 'active', 0);
								//计算总价钱及数量
								//								that.sum_goodnum += this.goods_num;
								//								that.sum_price += this.goods_num * this.goods_price;
							})

						})
						//						console.log(this.sum_price);
						//						console.log(this.goods_info);
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//点击加号
			/**
			 * 
			 * @param {Object} index   店铺下标
			 * @param {Object} index2  商品下标
			 * @param {Object} nums		数量
			 */
			plus: function(index, index2, nums) {
				//获取当前商品选中状态
				var goods_list = this.goods_info[index].goods_list[index2];
				var active = goods_list.active; //选中状态
				
				var price = parseInt(goods_list.goods_price); //商品价钱
				var cart_id = goods_list.cart_id;
				//当商品active==1时计算总价钱,及计算商品总数量
				if(active == 1) {
					let num = ++this.goods_info[index].goods_list[index2].goods_num;
					this.sum_goodnum++;
					let params = {
						cart_id: cart_id,
						goods_num: num
					}
					this.$http({
						method: 'POST',
						url: '/los/api/mall_member/cart_num.json',
						data: params
					}).then((res) => {

					}).catch((err) => {
						console.log(err);
					})
					//					this.sum_price= num*price+;
				} else {
					this.msg = '请先选择商品';
					this.toastShow = !this.toastShow;
				}

			},

			//点击减号
			/**
			 * 
			 * @param {Object} index   店铺下标
			 * @param {Object} index2      商品下标
			 * @param {Object} nums	         商品数量
			 */
			minus: function(index, index2, nums) {
				var goods_list = this.goods_info[index].goods_list[index2];
				var active = goods_list.active; //选中状态
				var price = parseInt(goods_list.goods_price); //商品价钱
				var cart_id = goods_list.cart_id; //商品id

				if(nums > 1) {
					if(active == 1) {
						//当商品active==1时计算总价钱和商品数量
						//this.sum_price -= price;
						var num = --this.goods_info[index].goods_list[index2].goods_num;
						this.sum_goodnum--;
						let params = {
							cart_id: cart_id,
							goods_num: num
						}
						//请求接口修改数据库数量
						this.$http({
							method: 'POST',
							url: '/los/api/mall_member/cart_num.json',
							data: params
						}).then((res) => {
	
						}).catch((err) => {
							console.log(err);
						})
					} else {
						this.msg = '请先选择商品';
						this.toastShow = !this.toastShow;
					}

				} else {
					num = 1;
				}
			},
			//封装获取传入值的下标
			arrIndex: function(arr, value) {
				var len = arr.length;
				for(var i = 0; i < len; i++) {
					if(arr[i] == value) {
						return i
					}
				}
				return false;
			},

			/**
			 * active:0 1   0代表未选中  1代表选中
			 */

			//全选
			/**
			 * 
			 * @param {Object} index   店铺下标
			 * @param {Object} active     active选中未选中状态
			 */
			allselect: function(index, active) {
				var goods_list = this.goods_info[index].goods_list;
				let that = this;
				if(active != 1) {
					this.goods_info[index].active = 1;
					this.shop_id.push(that.goods_info[index].shop_id); //存入店铺id
					//					console.log(this.shop_id);
					//全选
					for(var i = 0; i < goods_list.length; i++) {
						goods_list[i].active = 1;
					}
					//将此店铺下的商品id存入数组
					$.each(goods_list, function(index2) {
						//console.log(that.cart_ids.indexOf(this.cart_id));
						//判断是否包含重复已存入的数据
						if(that.cart_ids.indexOf(this.cart_id) == -1) {
							//计算总价格
							that.sum_goodnum += this.goods_num
							that.sum_price+=this.goods_price*this.goods_num;//计算总价钱
							that.cart_ids.push(this.cart_id);
						}
					})
					console.log(that.cart_ids);

				} else {
					//取消全选
					this.goods_info[index].active = 0;
					//删除shop_id
					this.shop_id.splice(this.arrIndex(this.shop_id, this.goods_info[index].shop_id), 1);
					console.log(this.shop_id);
					this.show = true;
					for(var i = 0; i < goods_list.length; i++) {
						goods_list[i].active = 0;
					}
					//将此店铺下的商品id移除数组
					$.each(goods_list, function(index2) {
							that.sum_goodnum -= this.goods_num
							that.sum_price-=this.goods_price*this.goods_num;//计算总价钱
						
						that.cart_ids.splice(that.arrIndex(that.cart_ids, this.cart_id), 1);
					})
					//					console.log(that.cart_ids);
				}

				//				console.log(this.goods_info);
			},
			//底部全选
			footAll: function() {
				let that = this;
				this.show = !this.show;
				var goods_info = this.goods_info;
				if(this.show == false) {
					//this.show==false即选中全选
					$.each(goods_info, function(index) {
						this.active = 1;
						$.each(goods_info[index].goods_list, function(index2) {
							this.active = 1;
							//判断是否包含重复已存入的数据
							if(that.cart_ids.indexOf(this.cart_id) == -1) {
								that.sum_goodnum += this.goods_num;//计算商品总数量
								that.sum_price+=this.goods_price*this.goods_num;//计算总价钱
								that.cart_ids.push(this.cart_id);
							}
						});
					})
					console.log(that.cart_ids);
				} else {
					//取消全选
					let that = this;
					$.each(goods_info, function(index) {
						this.active = 0;
						that.cart_ids.length = 0;
						$.each(goods_info[index].goods_list, function(index2) {
								that.sum_goodnum -= this.goods_num;//计算商品总数量
								that.sum_price-=this.goods_price*this.goods_num;//计算总价钱
							this.active = 0;
						});
					})
					console.log(that.cart_ids);

				}
			},

			/**
			 * 单选
			 * @param {Object} index  	店铺下标
			 * @param {Object} index2 	商品下标
			 * @param {Object} active	选中状态
			 * @param {Object} goods_id	商品id
			 */
			selected: function(index, index2, active, goods_id) {
				var goods_list = this.goods_info[index].goods_list[index2];
				var all_goods = this.goods_info[index].goods_list;
				var that = this;
				var length = 0; //记录active==1的商品个数
				var goodsLen; //记录共有几个商品
				if(active != 1) {
					//去除选中样式并获取商品id
					goods_list.active = 1;
					$.each(all_goods, function(index, el) {
						goodsLen = all_goods.length;
						//如果该商品active==1即选中
						if(this.active == 1)length++;
					});
					//当length与goodsLen相等时，即选中的数量与总商品数量相同时，把店铺全选状态加上
					if(length == goodsLen)that.goods_info[index].active = 1;
					//获取选中商品的数量
					this.sum_goodnum += goods_list.goods_num; //计算总数量
					this.sum_price += goods_list.goods_price * goods_list.goods_num; //计算总价钱
					this.cart_ids.push(goods_id);
				
					console.log("//////"+this.cart_ids);
				} else {
					this.sum_price -= goods_list.goods_price * goods_list.goods_num;
					this.goods_info[index].goods_list[index2].active = 0; //取消当前商品选中状态
					this.goods_info[index].active = 0; //取消当前店铺全选选中状态
					this.show = true; //控制全选未未选中
					this.sum_goodnum -= this.goods_info[index].goods_list[index2].goods_num; //取消选中减去相应的数量
					this.cart_ids.splice(this.arrIndex(this.cart_ids, goods_id), 1);
					console.log(this.cart_ids)
				}

			},
			//结算
			invo: function() {
				if(this.cart_ids.length == 0) {
					this.toastShow = !this.toastShow;
					this.msg = "请先选择商品";
				} else {
					console.log(this.cart_ids);
					this.$router.push({
						name: 'FillOrder', //要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',
//						path: '../FillOrder',
						query: {
							cart_ids: this.cart_ids,
						}
					})
				}

			},
			//编辑 点击改变样式
			editor:function(){
				if(this.btnTxt=='完成'){
					this.btnTxt='编辑';
					this.delShow=true;
					
				}else{
					this.btnTxt='完成';	
					this.delShow=false;
				}
			},
			//删除选中的商品
			del:function(){
				console.log(this.goods_info);
				
				let params={
					cart_id:this.cart_ids
				}
				this.$http({
					method:'delete',
					url:'los/api/mall_member/cart_list.json',
					data:params
				}).then((res)=>{
					this.$http({
						method:"GET",
						url:'/los/api/mall_member/cart_list.json'
					}).then((res)=>{
						this.goods_info=res.data.data.goods_cart_list;
						this.sum_goodnum=0;
					})
				}).catch((err)=>{
					console.log(err);
				})
			}
		},
	}
</script>

<style scoped>
	#ShopCart {
		/*padding: 0.13333rem;*/
		padding-bottom: 2rem;
	}
	
	.header {
		height: 1.17rem;
		background: #FFFFFF;
		padding: 0 0.4rem;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.header .icon-black-back {
		width: 0.45rem;
		height: 0.45rem;
		position: absolute;
		top: 50%;
		margin-top: -0.22rem;
		left: 0.4rem;
	}
	
	.header .shop-address {
		width: 0.26rem;
		height: 0.4rem;
		position: absolute;
		left: 58%;
	}
	
	.header p {
		font-size: 0.45rem;
		color: #222222;
		/*flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;*/
		text-align: center;
	}
	
	.header p .headerT {
		font-size: 0.45rem;
		color: #222222;
	}
	
	.header .success {
		position: absolute;
		right: 0.4rem;
		font-size: 0.37rem;
		color: #666666;
	}
	/*.cart-icon {
		width: 0.37333rem;
		height: 0.37333rem;
		display: inline-block;
		background-size: 0.14666rem 0.26666rem;
		background-repeat: no-repeat;
		background-position: center center;
		font-size: 0;
	}
	
	.cart-icon-right {
		background-image: url(../assets/images/icon/shop_cart_down.png);
	}*/
	
	.cart-list {
		padding: 0.26666rem;
	}
	
	.cart-list .cart-item {
		padding: 0.26666rem;
		margin-bottom: 0.26666rem;
		background-color: #fff;
		border-radius: 0.26666rem;
	}
	
	.cart-list .cart-item .cart-item-title {
		padding: 0.13333rem 0;
		display: flex;
	}
	
	.cart-list .cart-item .cart-item-title .title {
		font-size: 0.34666rem;
		font-weight: 500;
		display: flex;
		align-items: center;
	}
	
	.cart-list .cart-item .cart-item-title .title i {
		width: 0.26rem;
		height: 0.26rem;
		margin-left: 0.2rem !important;
	}
	
	.cart-list .cart-item .cart-item-title .title img {
		float: left;
		width: 0.50666rem;
		height: 0.50666rem;
		display: inline-block;
		vertical-align: middle;
		margin-right: 0.13333rem;
		border-radius: 50%;
	}
	
	.cart-list .cart-item .cart-item-title .title .name {
		font-size: 0.34666rem;
		float: left;
	}
	
	.cart-list .cart-item .cart-item-title .title i {
		float: left;
		margin-top: 0.06666rem;
		margin-left: 0.06666rem;
	}
	
	.checkbox {
		width: 0.50666rem;
		height: 0.50666rem;
		margin-right: 0.26666rem;
		margin-top: 0.06666rem;
		border-radius: 50%;
		border: solid 0.02666rem #ccc;
		display: inline-block;
		position: relative;
	}
	
	.chrActive:after {
		content: "";
		position: absolute;
		background: red;
		width: 0.53rem;
		height: 0.53rem;
		line-height: 0.50666rem;
		/*border: solid 0.02666rem red;*/
		background: url(../assets/images/icon/pay_choosed.png) no-repeat;
		background-size: 0.53rem 0.53rem;
		top: -2px;
		left: -1px;
		border-radius: 50%;
		color: #FFFFFF;
		text-align: center;
	}
	/*.checkbox .checkbox-icon{
		position: relative;
		width: 0.50666rem;
		height: 0.50666rem;
		margin-right: 0.26666rem;
		margin-top: 0.06666rem;
		border-radius: 50%;
		border: solid 0.02666rem #ccc;
		display: none;
	}
	.checkbox .checkbox-icon.active{
		border-color: #DD2835;
		display: block;
	}
	.checkbox .checkbox-icon.active:before{
		content: '';
		position: absolute;
		width: 0.26666rem;
		height: 0.26666rem;
		left: 50%;
		top: 50%;
		margin-top: -0.13266rem;
		margin-left: -0.13266rem;
		background-color: #DD2835;
		border-radius: 0.26666rem;
	}*/
	
	.coupon {
		flex: 1;
		text-align: right;
		font-size: 0.34666rem;
	}
	
	.cart-list .cart-item .cart-item-body {
		padding: 0.13333rem 0;
		display: flex;
	}
	
	.cart-list .cart-item .cart-item-body .body {
		width: 100%;
		display: flex;
	}
	
	.cart-list .cart-item .cart-item-body .body .checkbox {
		align-self: center
	}
	
	.cart-list .cart-item .cart-item-body .body .img {
		width: 2.69333rem;
		height: 2.69333rem;
		margin-right: 0.26666rem;
	}
	
	.cart-list .cart-item .cart-item-body .body .img img {
		width: 100%;
		height: 100%;
		border-radius: 0.13333rem;
	}
	
	.cart-list .cart-item .cart-item-body .body .info {
		flex: 1;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	
	.cart-list .cart-item .cart-item-body .body .info .name {
		font-size: 0.34666rem;
		margin-bottom: 0.26666rem;
	}
	
	.cart-list .cart-item .cart-item-body .body .info .other {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	
	.cart-list .cart-item .cart-item-body .body .info .other .price {
		float: left;
		font-size: 0.48rem;
		color: #DD2835;
		padding-left: 0.26666rem;
		line-height: 0.728rem;
		position: relative;
	}
	
	.cart-list .cart-item .cart-item-body .body .info .other .price span {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.26666rem;
	}
	
	.cart-list .cart-item .cart-item-body .body .info .spec {
		height: 0.69333rem;
		line-height: 0.69333rem;
		padding: 0 0.13333rem;
		border-radius: 0.05333rem;
		background-color: rgba(248, 248, 248, 1);
		/*background-image: url(../assets/img/ic_shopping_cart_down.png);*/
		background-size: 0.21333rem 0.10666rem;
		background-repeat: no-repeat;
		background-position: 98% center;
		color: #999;
	}
	
	.num-box {
		width: 2.24rem;
		height: 0.728rem;
		padding: 0.06rem;
		float: right;
		border: solid 1px #E6E6E6;
		border-radius: 0.34666rem;
		display: flex;
	}
	
	.num-box .btn {
		position: relative;
		width: 0.56rem;
		height: 0.56rem;
		font-size: 0;
		/*
		float: left;
		text-align: center;
		line-height: 0.56rem;
		background-color: #f5f5f5;
		border-radius: 50%;
		*/
		display: block;
	}
	
	.num-box .btn.minus {
		background-image: url(../assets/images/icon/ic_shopping_cart_reduce.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	
	.num-box .btn.plus {
		background-image: url(../assets/images/icon/ic_shopping_cart_plus.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	
	.num-box .value {
		width: 0.94666rem;
		line-height: 0.6rem;
		text-align: center;
		font-size: 0.37333rem;
	}
	
	.footer {
		width: 100%;
		height: 1.44rem;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		align-items: center;
	}
	
	.footer .footer-left {
		flex: 1;
		display: flex;
		align-items: center;
		padding-left: 0.4rem;
	}
	
	.footer .footer-left span {
		margin-left: 0.18rem;
		margin-right: 0.66rem;
		color: #222222;
		font-size: 0.37rem;
	}
	
	.footer .footer-left p {
		color: #222222;
		font-size: 0.37rem;
	}
	
	.footer .pay-btn {
		width: 2.98rem;
		height: 1.44rem;
		line-height: 1.44rem;
		text-align: center;
		background: linear-gradient(90deg, rgba(221, 40, 53, 1) 0%, rgba(221, 40, 87, 1) 100%);
		color: #FFFFFF;
		font-size: 0.4rem;
	}
	 .del .pay-btn{
	 	width: 2.8rem;
	 	height: 0.9rem;
	 	border-radius:0.46rem;
	 	line-height: 0.93rem;
	 	margin-right: 0.4rem;
	 }
	.del .collect{
		background: #FFFFFF;
		border: 1px solid rgba(221,40,53,1);
		color:rgba(221,40,55,1);
		font-size: 0.4rem;
	}
	.checkbox.show {
		background-color: red;
	}
</style>
<style>
	.checkbox .weui-icon-success,
	.checkbox .weui-icon-success-circle {
		font-size: 0.50666rem;
		color: #DD2835;
	}
	
	.checkbox .weui-icon-circle {
		font-size: 0.50666rem;
	}
	
	.checkbox [class^="weui-icon-"]:before,
	.checkbox [class*=" weui-icon-"]:before {
		margin: 0;
	}
</style>